<template>
    <div class="content">
      <div class="tabBox">
        <div class="tabItem" v-for="(item,index) in tabList" :key="index" @click="handleClick(index)"
             :style="{'color':(index == activeIndex ?'#e8634a':'#fff')}">{{ item }}
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Community",
      data() {
        return {
          activeIndex: -1,
          tabList: ["国学文化", "教育文创", "中文出海"]
        }
      },
      methods: {
        handleClick(i) {
          this.activeIndex = i
          console.log(i);
        }
      }
    }
</script>

<style scoped>
   .content{
     background-color: #000;
     width: 100%;
     height: 100%;
     position: fixed;
   }
   .tabBox {
     display: flex;
     justify-content: flex-end;
     font-size: 22px;
     padding: 80px 0;
     animation: fadeout 1s linear forwards;

     .tabItem {
       padding: 0 30px;
       cursor: pointer;

     }

     .tabItem:hover {
       color: #e8634a;
     }
   }


   @keyframes fadeout {
     from {
       opacity: 0;
     }
     to {
       opacity: 1;
       transform: translateX(-5%)
     }
   }
</style>